<template>
  <div class="newSong">
    <!-- <h1>新歌</h1> -->
    <!-- 轮播图组件 rotation-chart -->
    <rotation-chart class="ro-chart"></rotation-chart>
    <!--音乐列表组件 -->
    <loading v-if="newsSong.length==0"></loading>
    <music-list @play="$emit('play',$event)" class="mu-list" :songlist="showlist" ></music-list>
    <!-- 查看更多 -->
    <loading v-if="newsSong.length==0"></loading>
    <see-more v-else :page="page" @loadMore="loadMorelook"></see-more>
  </div>
</template>
<script>
import RotationChart from '@/components/RotationChart.vue'; //导入轮播图组件
import MusicList from '@/components/MusicList.vue' //音乐列表
import SeeMore from '@/components/SeeMore.vue'
export default {
  data(){
    return {
      newsSong:[], //新歌 
      page:1,  //记录页数
     
    }
  },
  created(){
    this.axios.get("/playlist/detail",{params:{id:3778678}})
    .then(result=>{
      // console.log("获取歌单详情=数据=>",result);
      // result.playlist.tracks 得到的是数组,里面的每一项是对象
      let musiclist=result.playlist.tracks.map((v,index)=>{
        // 为了重用musicList组件,里面数据格式化,添加一个song属性.
        v.song={
          privilege:result.privileges[index], //码率
          artists: v.ar,  //歌手转化为artists
          album: v.al  //专辑转化为album
        }
        return v;
      })
      this.newsSong=musiclist;
    })
  },
  methods:{
    // 查看(/加载)更多
    // loadMore(){
    //   return this.page++;
    // }
    loadMorelook(even){
      this.page=even.pagep;
      // console.log(even);
    },
    
  },
  
  computed:{
    showlist(){
      return this.newsSong.slice(0,this.page*20);
    }
  },
  components:{
    "rotation-chart":RotationChart, //轮播图
    MusicList,  //音乐列表组件
    SeeMore,  //查看更多
  }
}
</script>
<style lang="less" scoped>

</style>
